<template>
	<view class="">
		<view class="Fonttextbox louis-padding-lf-0 louis-relative">
			<view class="Fonttext louis-font-pixel louis-absolute ">
				盒 子 模 型
			</view>
			<louis-back>

			</louis-back>
			<image class="louis-w-max " :src="imgsrc" mode="widthFix"></image>
		</view>

		<view class="mind-center">
			<view class="louis-space-around">

				<view style="width:150rpx;padding:10rpx;" v-for="(item,index) in Basicslist" :key="index" @tap="Basicsindexindex(index)" :id="index==Basicsindex?'Basicsrblue':''"
				 class="Basics">

					<view class="louis-center louis-padding-top-0rpx louis-font-pixel">

						<i style="line-height: 28rpx;margin-right: 10rpx;" class="louis-font-30rpx" :class="'louis-icon-'+item.imgsrc"></i>
						{{item.name}}
					</view>

				</view>

			</view>

			<!-- Flex布局 -->
			<distance v-if="Basicsindex==0" />
			<border v-if="Basicsindex==1" />
			<boxsize v-if="Basicsindex==2" />
		</view>



	</view>
</template>





<script>
	import distance from './distance/distance'
	import border from './border/border'
	import boxsize from './boxsize/boxsize.vue'
	export default {
		components: {
			border,
			distance,
			boxsize
		},
		data() {
			return {
				Basicslist: [{
						name: "边距",
						imgsrc: "full"
					},
					{
						name: "边框",
						imgsrc: "mian"
					},
					
					{
						name: "尺寸",
						imgsrc: "huanyuanhuabu"
					}
				],
				imgsrc: "http://zons.oss-cn-shenzhen.aliyuncs.com/cc0f97297abd58252f9f60854d5e3bd913769be8.gif",
				// imgsrc: "http://zons.oss-cn-shenzhen.aliyuncs.com/1dfae88cf43aa71567d1ce52d309e3d5ac4eede2.gif"
				Basicsindex: 0,
			};

		},
		mounted() {

		},
		methods: {
            Basicsindexindex(index){
				this.Basicsindex=index
			}
		}
	}
</script>
<style scoped lang="less">
	.Fonttextbox {
		// height: 550rpx;
		overflow: hidden;
		// z-index: 0;
		line-height: 0rpx;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.7);
		width: 100%;
		height: 100%;
		top: 710rpx;
		left: 230rpx;
		width: 200rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		width: 100rpx;
		// transform:skewX(23deg);
		// color: #db79a5;
		font-weight: bold;
		opacity: 0.8;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;
		box-sizing: border-box;
		background-color: rgba(29, 5, 41, 0.2);
		padding-top: 15rpx;
		padding-bottom: 20rpx;

		// &:active {
		// 	background-color: rgba(206, 31, 84, 0.8);
		// }
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.2);
	}

	#Basicsred {
		background-color: rgba(206, 31, 84, 0.2);
	}

	#Basicsrblue {
		background-color: rgba(64, 158, 255, 0.6);
	}


	.Basicsrblue {
		background-color: rgba(64, 158, 255, 0.6);
	}

	.font {
		margin-top: 20rpx;
	}

	.coloritem {
		position: relative;
		top: -50rpx;
	}

	.colorblock {

		// font-size: 25rpx;
		display: inline-block;
		margin-left: 7rpx;
		// margin-top: 10rpx;
		// width: 130rpx;
		// height: 130rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.colorblock:nth-child(5n) {
		margin-right: 0rpx;
	}

	#F {
		color: #000000
	}

	.louis-bg-MD {
		// background-color: rgba(0,0,0,0.1);
		display: inline-block;
		padding: 5rpx 10rpx;

	}

	.mind-center {
		background-image: none;
		background-repeat: repeat;
		// background-color: rgba(0,0,0,0.5);
		// background-size: auto;
		// background-color: #000e26;
		background-image: linear-gradient(#000000, #4d2882);
		// background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594701246902&di=2322f51a1de78a3fd5205c95a2ab65eb&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F20%2F20150920130356_PAriW.gif');
		// background-repeat: repeat;
		// background-size: auto;
	}
</style>
